import React, {useEffect, useState} from 'react';
import {
    Box,
    Card,
    CardContent,
    CardHeader, IconButton,
    Paper, Stack,
    Table,
    TableBody,
    TableCell,
    TableContainer,
    TableHead,
    TableRow,
} from "@mui/material";
import CircularProgress from "@mui/material/CircularProgress";
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
import Collapse from '@mui/material/Collapse';
import Typography from '@mui/material/Typography';
import {list} from "../../api/school/student";


function Row(props) {

    const {row} = props;
    const [open, setOpen] = React.useState(false);

    return (
        <React.Fragment>
            <TableRow>
                <TableCell>
                    {row.children.length > 0 ?
                        <IconButton size="small" onClick={() => setOpen(!open)}>
                            {open ? <KeyboardArrowUpIcon/> : <KeyboardArrowDownIcon/>}
                        </IconButton> : null}
                </TableCell>
                <TableCell component="th" scope="row">{row.id}</TableCell>
                <TableCell>{row.name}</TableCell>
                <TableCell>{row.ct}</TableCell>
            </TableRow>

            {row.children.length > 0 &&
                <TableRow>
                    <TableCell style={{paddingBottom: 0, paddingTop: 0}} colSpan={4}>
                        <Collapse in={open} timeout="auto" unmountOnExit>
                            <Box sx={{margin: 1, ml: '60px'}}>
                                <Typography sx={{fontWeight: 'bold', ml: 1}} gutterBottom
                                            component="div">子女</Typography>
                                <TableContainer component={Paper}>
                                    <Table size="small">
                                        <TableHead>
                                            <TableRow>
                                                <TableCell width={'30px'}>ID</TableCell>
                                                <TableCell>名称</TableCell>
                                                <TableCell width={'160px'}>注册时间</TableCell>
                                            </TableRow>
                                        </TableHead>

                                        <TableBody>
                                            {row.children.map((e) => (
                                                <TableRow key={e.id}>
                                                    <TableCell component="th" scope="row">{e.id}</TableCell>
                                                    <TableCell>{e.name}</TableCell>
                                                    <TableCell>{e.ct}</TableCell>
                                                </TableRow>
                                            ))}
                                        </TableBody>
                                    </Table>
                                </TableContainer>
                            </Box>
                        </Collapse>
                    </TableCell>
                </TableRow>}
        </React.Fragment>
    );
}

function Student() {

    const [students, setStudents] = useState([]);
    const [loading, setLoading] = useState(false);
    const [total, setTotal] = useState(0);

    useEffect(() => {
        loadStudents();
    }, []);

    function loadStudents() {
        setLoading(true);
        list().then(data => {
            setTotal(data.length);

            if (data.length === 0) {
                setStudents([]);
            } else {
                const parents = data.filter(e => e.role === 'PARENT')
                parents.forEach(e => {
                    e.children = data.filter(c => c.parentId === e.id)
                    if (e.children.length) {
                        const childrenNames = e.children.map(c => c.name).join('，');
                        e.name = `${e.name}（${childrenNames}）`;
                    }
                })
                setStudents(parents);
            }

            setLoading(false);
        });
    }

    return (
        <Box p={4} display="flex" gap={4} alignItems="flex-start" flexWrap="wrap">
            <Card raised sx={{width: '50%', padding: 2, boxSizing: 'border-box', minWidth: '640px'}}>
                <CardHeader title={
                    <Stack direction="row" alignItems="center" spacing={1}>
                        <Typography variant="h5">学员信息</Typography>
                        {loading && <CircularProgress color="inherit" size={24}/>}
                    </Stack>}/>
                <CardContent>
                    <TableContainer component={Paper}>
                        <Table>
                            <TableHead>
                                <TableRow>
                                    <TableCell width={'30px'}/>
                                    <TableCell width={'30px'}>ID</TableCell>
                                    <TableCell>名称</TableCell>
                                    <TableCell width={'160px'}>注册时间</TableCell>
                                </TableRow>
                            </TableHead>
                            <TableBody>
                                {students.map(e => <Row key={e.id} row={e}/>)}
                                <TableRow>
                                    <TableCell colSpan={4}>
                                        总计 {total}：
                                        家长 {students.length}，
                                        子女 {total - students.length}
                                    </TableCell>
                                </TableRow>
                            </TableBody>
                        </Table>
                    </TableContainer>
                </CardContent>
            </Card>
        </Box>
    );
}

export default Student;
